// @ts-ignore
import React, {useEffect, useState} from "react";
import {Form, FormInstance, Input, Modal} from "antd";
import IconUpload from "@/app/lib/IconUpload";
import TextArea from "antd/es/input/TextArea";
// @ts-ignore
function EditForm({onFormInstanceReady,app}){
  const [form] = Form.useForm();
  const onIconChange = function (data:any){
    form.setFieldValue("icon",data.accessUrl)
  }
  useEffect(() => {
    onFormInstanceReady(form);
  }, []);
  return (
    <Form layout={"horizontal"} form={form} labelCol={{ span: 6 }} wrapperCol={{ span: 16 }} size={"small"} initialValues={app}>
      <Form.Item
        name="appname"
        label="应用名"
      >
        <Input readOnly disabled={true}/>
      </Form.Item>
      <Form.Item
        name="appTitle"
        label="应用显示名"
        rules={[{ required: true, message: '应用显示名不能为空' }]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        name="sort"
        label="排序"
        rules={[{ required: true}]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        name="route"
        label="路由地址"
        rules={[{ required: false}]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        name="icon"
        label="图标"
        rules={[{ required: false}]}
      >
        <IconUpload onUploadSuccess={onIconChange} initUrl={app.icon}/>
      </Form.Item>
      <Form.Item
        name="description"
        label="描述"
        rules={[{ required: false}]}
      >
        <TextArea rows={3} />
      </Form.Item>
      <Form.Item
        name="attributes"
        label="扩展属性"
        rules={[{ required: false}]}
      >
        <TextArea rows={3} />
      </Form.Item>
    </Form>
  )
}

// @ts-ignore
export default function EditModal({open,onEditCancel,onEditOk,app}){
  const [formInstance, setFormInstance] = useState<FormInstance>();
  return (
    <Modal title={"编辑"} okText={"确定"} cancelText={"取消"} okButtonProps={{ autoFocus: true }} destroyOnClose={true}
           open={open} onCancel={onEditCancel}
           onOk={async () => {
             try {
               const values = await formInstance?.validateFields();
               // formInstance?.resetFields();
               onEditOk(values);
             } catch (error) {
               console.log('Failed:', error);
             }
           }}>
      <EditForm
        app={app}	// @ts-ignore
        onFormInstanceReady={(instance) => {
          setFormInstance(instance);
        }}
      />
    </Modal>
  );
}